<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link href="<%=basePath%>/css/hm.css" rel="stylesheet" />
<link href="<%=basePath%>/css/sweetalert.css" rel="stylesheet" />

<script type="text/javascript" src="<%=basePath%>/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/weui/jquery-weui.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/sweetalert.min.js"></script>
<title>汉宁红木-红木知识等级考试</title>
<style>
</style>
</head>
<body class="hm-q-body">
	<br>
	<br>
	<br>
	<div class="hm-q-content">
	    <c:forEach var="question" items="${result}" varStatus="status">
		<div class="hm-q-question">
			<div class="hm-q-question-logo"></div>
			<br>
			<div class="hm-q-question-title">
				${status.index+1} . 
				${question.title}
			</div>
			<div class="hm-q-question-ans-content">
				<div class="hm-q-question-ans" index="${status.index}" qid="${question.id}" ans="A">${question.answerA}</div>
				<div class="hm-q-question-ans" index="${status.index}" qid="${question.id}" ans="B">${question.answerB}</div>
				
				<c:if test="${question.type == 2}">
				<div class="hm-q-question-ans" index="${status.index}" qid="${question.id}" ans="C">${question.answerC}</div>
				<div class="hm-q-question-ans" index="${status.index}" qid="${question.id}" ans="D">${question.answerD}</div>
				</c:if>
			</div>

			<c:if test="${status.index%2==1}">
			<div class="hm-q-question-tail1"></div>
			</c:if>
			<c:if test="${status.index%2==0}">
			<div class="hm-q-question-tail2"></div>
			</c:if>
		</div>
        </c:forEach>
	</div>
	
	<div class="" style="width:100%;margin:50px auto 60px auto;text-align:center ">
		<div class="hm-main-btn" id="submit">
		提交答案
		</div>
	</div>
	<form action="<%=basePath%>/answer.htm" id="form">
	<input id="subQuestions" type="hidden" value="${questions }" name="subQuestions"  />
	<input id="subAnswers" type="hidden" value="" name="subAnswers" />
	<input id="subId" type="hidden" value="${subId }" name="subId" />
		
	</form>
	
	<script type="text/javascript">
	var ansArr = new Array(10);
	for(var i = 0 ; i < ansArr.length ; i++){
		ansArr[i]='';
	}
	$(".hm-q-question-ans").click(function(){
		var ethis=$(this);
		var qid=ethis.attr("qid");
		var ans=ethis.attr("ans");
		var index=ethis.attr("index");
		console.log("-------qid:"+qid+",ans:"+ans+",index:"+index+"-------------");
		ansArr[index] = ans;
		console.log("-------ansArr:"+ansArr+"-------------");
		ethis.parent().children().removeClass('hm-q-question-ans-act');
		ethis.addClass('hm-q-question-ans-act');
		
	});
	$("#submit").click(function(){
		var subanswer = "";
		for(var i = 0 ; i < ansArr.length ; i++){
			if(ansArr[i]==''){
				swal("您的第"+(i+1)+"题还未作答");
				return false;
			}
		}
		for(var j = 0 ; j < ansArr.length ; j++){
			if(j!=0){
				subanswer+=","+ansArr[j];
			}
			else{
				subanswer+=ansArr[j];
			}
		}
		$("#subAnswers").val(subanswer);
		$('#form').submit();
		
		$('.hm-main-btn').css({
			color:'#fff'
			,background:'#951201'
		});
	});
	</script>
</body>
</html>